<template>
	<view class="open-center">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<view class="top-cover">
			<view class="hd">开通运营中心说明：</view>
			<view class="bd">
				1.运营中心才有资格帮其他代理开通运营中心；<br />
				2.需要填写以下信息并支付费用，待后台审核后方可开通；
			</view>
			<view class="fd">
				<image :src="$imageUrl('/static/images/img-dl.png')" mode="aspectFill"></image>
			</view>
		</view>

		<view class="agent-area">
			<view class="label">当前用户运营区域</view>
			<view class="value">
				<view>{{operation_area_name}}</view>
			</view>
		</view>

		<u-form class="form" labelPosition="left" :model="formData" :rules="rules" ref="formRef">
			<u-form-item class="form-item" label="开通会员" labelWidth="100" prop="member_id">
				<cus-selects :closeSelect.sync="false" :data="memberList" :value="formData.member_id"
					placeholder="请输入关键字搜索" @change="changeMember()" :clearable="true" :filterable="true"
					:searchType='1'></cus-selects>
			</u-form-item>
			<u-form-item class="form-item" label="开通会员当前等级" labelWidth="150">
				{{operation_level_name}}
			</u-form-item>
			<u-form-item class="form-item" label="开通运营等级" labelWidth="120" prop="change_operation_level">
				<uni-data-select v-model="formData.change_operation_level" :localdata="operationLevelList"
					@change="changeOperationLevel()"></uni-data-select>
			</u-form-item>
			<u-form-item class="form-item" label="开通区域" labelWidth="100">
				<view class="area-opt" v-if="formData.change_operation_level==2">
					<uni-data-select class="area-item" v-model="formData.province" :localdata="provinceList"
						@change="getCity"></uni-data-select>
					<uni-data-select class="area-item" v-model="formData.city" :localdata="cityList"
						@change="getArea"></uni-data-select>
				</view>
				<view class="area-opt" v-if="formData.change_operation_level==1">
					<uni-data-select class="area-item" v-model="formData.province" :localdata="provinceList"
						@change="getCity"></uni-data-select>
					<uni-data-select class="area-item" v-model="formData.city" :localdata="cityList"
						@change="getArea"></uni-data-select>
					<uni-data-select class="area-item" v-model="formData.area" :localdata="areaList"
						@change="getRegion"></uni-data-select>
				</view>
			</u-form-item>
			<u-form-item class="form-item" label="开通运营中心名称" labelWidth="140" prop="name">
				<u-input border="none" v-model="formData.name" placeholder="输入开通运营中心名称"></u-input>
			</u-form-item>
			<u-form-item class="form-item" label="运营中心联系人" labelWidth="140" prop="contact_name">
				<u-input border="none" v-model="formData.contact_name" placeholder="输入运营中心联系人"></u-input>
			</u-form-item>
			<u-form-item class="form-item" label="运营中心联系电话" labelWidth="140" prop="mobile">
				<u-input border="none" v-model="formData.mobile" placeholder="输入运营中心联系电话"></u-input>
			</u-form-item>
			<u-form-item class="form-item" label="运营中心地址" labelWidth="120" prop="address">
				<u-textarea border="none" v-model="formData.address" placeholder="输入运营中心地址"></u-textarea>
			</u-form-item>
		</u-form>

		<view class="footer">
			<view class="btn-group">
				<u-button class="btn" type="primary" size="large" block @click="saveInfo()">提交</u-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';
	import cusSelects from '@/components/cus-selects-fan/cus-selects-fan.vue';

	const state = reactive({
		title: '开通运营中心',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		operation_area_name: '',
		operation_level_name: '',
		formData: {
			member_id: 0,
			change_operation_level: 0,
			province: 0,
			city: 0,
			area: 0,
			name: '',
			contact_name: '',
			mobile: '',
			address: ''
		},
		memberList: [],
		operationLevelList: []
	});

	const rules = ref([]);
	const formRef = ref();
	const provinceList = ref([]);
	const cityList = ref([]);
	const areaList = ref([]);

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
		}
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function changeMember(e) {
		console.log('选择会员', e);
	}

	function changeOperationLevel(e) {
		console.log('选择等级', e);
	}

	function getProvince() {

	}

	function getCity() {

	}

	function getArea() {

	}

	function getRegion() {

	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		operation_area_name,
		operation_level_name,
		formData,
		memberList,
		operationLevelList,
	} = toRefs(state);
</script>

<style lang="scss">
	.open-center {
		padding-bottom: calc(10rpx + env(safe-area-inset-bottom));

		.top-cover {
			height: 230rpx;
			padding: $m24;
			background: linear-gradient(180deg, rgba(199, 224, 255, 0.5) 0%, rgba(199, 224, 255, 0.2) 77%, rgba(255, 255, 255, 0) 100%);
			background-size: 100% 100%;
			position: relative;

			.hd {
				margin: $m24 0 0 0;
				font-size: 34rpx;
				color: $main-color;
			}

			.bd {
				margin-right: 200rpx;
				font-size: 26rpx;
				color: $tips-color;
			}

			.fd {
				position: absolute;
				top: 60rpx;
				right: 20rpx;
				width: 230rpx;
				height: 180rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.agent-area {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: $m24;

			.value {
				display: flex;

				view {
					margin: 0 20rpx 0 0;
					font-size: 30rpx;
					color: $main-color ;
				}
			}
		}

		.form {
			padding: $m24;

			.form-item {
				background: #fff;
				margin-bottom: $m16;
				padding: 0 $m24;
				border-radius: 10rpx;

				.area-opt {
					display: flex;

					.area-item {
						width: 200rpx;
					}
				}
			}
		}

		.footer {
			position: fixed;
			/* 固定在底部 */
			bottom: 0;
			width: 100%;

			.btn-group {
				.btn {}
			}
		}
	}
</style>